<template>
  <div>
    {{ title }} 
  </div>

  <div>
    <ElForm :inline="true">
      <ElFormItem>
        <ElButton  @click="avisible = true" type="warning">添加</ElButton>
      </ElFormItem>
    </ElForm>
  </div>


  <div>
    <ElTable :data="aaa" stripe border>
      <ElTableColumn prop="gname" label="商品名称"></ElTableColumn>
      <ElTableColumn prop="gsort" label="商品分类"></ElTableColumn>
      <ElTableColumn prop="gprice" label="商品售价"></ElTableColumn>
      <ElTableColumn prop="gbuying" label="商品进价"></ElTableColumn>
      <ElTableColumn label="信息修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="操作">
        <template #default="scope">
          <ElButton @click="showModify(scope.row)" type="primary">修改</ElButton>
          <ElButton @click="del(scope.row)" type="danger">删除</ElButton>
        </template>
      </ElTableColumn>

    </ElTable>
  </div>

  <!-- 添加对话框 -->
  <ElDialog v-model="avisible" title="添加商品信息" :close-on-click-modal="false" @closed="query">
    <div>
      <Elform v-loading="adding">

        <ElFormItem>
          <ElInput placeholder="商品名称" v-model="addInfo.gname"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput placeholder="商品类型(生活用品-电器-游戏设备)" v-model="addInfo.gsort"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput placeholder="商品售价" v-model="addInfo.gprice"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput placeholder="商品进价" v-model="addInfo.gbuying"></ElInput>
        </ElFormItem>
      </Elform>
    </div>

    <template #footer>
      <div>
        <ElButton @click="add" type="primary" v-loading="adding">添加</ElButton>
        <ElButton @click="avisible = false">关闭</ElButton>
      </div>
    </template>
  </ElDialog>

   <!-- 修改对话框 -->
   <ElDialog v-model="mvisible" title="修改商品信息" :close-on-click-modal="false" @closed="query">
    <div>
      <Elform v-loading="modifying">

          <ElFormItem>
          <ElInput v-model="addInfo.gname"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="addInfo.gsort"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="addInfo.gprice"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="addInfo.gbuying"></ElInput>
        </ElFormItem>
      </Elform>
    </div>

    <template #footer>
      <div>
        <ElButton @click="modify" type="primary" v-loading="modifying">保持</ElButton>
        <ElButton @click="mvisible = false" type="danger">关闭</ElButton>
      </div>
    </template>
  </ElDialog>



</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ApiService from "../../ts/ApiService"
import Tools from "../../ts/Tools"
import {BaselistResult,PageInfo,BaseResult} from "../../ts/BaseResult"
import {Goods} from "../../ts/Manage"
import { ElDialog, ElButton, ElMessageBox, ElTable, ElTableColumn } from 'element-plus'


//#region ====查询=================

const title = ref('商品管理')
const page = ref(new PageInfo())
const aaa = ref(new Array<Goods>())
const queryAInfo = ref({})

function query(){
  ApiService.get('/Goods/query',
  Tools.concatJson(page.value,queryAInfo.value),
  (data:BaselistResult<Goods>)=>{
    if(data.success){
      page.value=data.page
      aaa.value=data.data
      console.log("数据",aaa)
      return
    }
    ElMessageBox.alert(data.message,'商品管理')
  })
}
query()
//#endregion


//#region ==========添加部分===========
const addInfo = ref(new Goods())
const adding = ref(false)
const avisible = ref(false)

function add() {
  adding.value = true
  ApiService.post('/Goods/add', addInfo.value, (data: BaseResult) => {
    adding.value = false
    if (data.success) {
      ElMessageBox.alert(data.message, '班级添加')
    }
  })
}

//#endregion

//#region =========删除部分============
function del(info: Goods) {
  ElMessageBox.confirm(`是否删除：${info.gname}？`)
    .then(() => {
      ApiService.post('/Goods/delete', { gid: info.gid }, (data: BaseResult) => {
        if (data.success) {
          ElMessageBox.alert(data.message)
          query()
        }
      })
    })
    .catch(() => {})
}
//#endregion

//#region =========修改===============
const modifyinfo = ref(new Goods())
const modifying = ref(false)
const mvisible = ref(false)

function showModify(info: Goods) {
  modifyinfo.value = Tools.concatJson(info)
  mvisible.value = true
}

function modify() {
  modifying.value = true
  ApiService.post('/Goods/update', modifyinfo.value, (data: BaseResult) => {
    modifying.value = false
    if (data.success) {
      ElMessageBox.alert(data.message)
      query()
    }
  })
}
//#endregion =========================


</script>
<style></style>
